<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="base.css/base.css">
    <link rel="stylesheet" href="common.css/common.css">
    <script src="lib/jquery-3.2.1.js"></script>
</head>
<body>
    <div class="top">
        <div class="top-wrap">
            <div class="top-wrap-left">
                <a href="#">小米网|MIUI|米聊|游戏|多看阅读|云服务|小米网移动版|Select region|米粉节答疑</a>
            </div>
            <div class="top-wrap-right">
            <a href="#">注册|登录</a>
            </div>
        </div>
    </div>

    <div class="nav">
        <div class="nav-wrap">
            <img class="logo" src="images/logo.png" alt="">
            <input class="search" type="text" placeholder="搜索你想要的商品"><span><button class="fangdajing"></button></span>
            <button class="buy"><img src="images/shopcar.png">购物车</button>
            <img class="clock" src="images/clock.png" alt=""><span class="time">4月14日开放购买</span>
        </div>
    </div>
    
    <div class="container">
        <div class="container-wrap-one">
            <div class="container-nav">
                <div class="container-nav-left">
                    <a href="#">全部商品分类</a>
                    <table class="one">
                        <tr>
                            <td>
                                <span class="title">购买手机</span><br><span class="content">小米Noto 小米4 红米 红米Noto</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="title">购买电视与平板</span><br><span class="content" >小米电视 小米盒子 小米平板</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="title">路由器与智能硬件</span><br><span class="content">路由器 体重秤 净化器与滤芯</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="title">插线板、移动电源与电池</span><br><span class="content">小米移动电源 电池 充电器</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="title">耳机音响与存储卡</span><br><span class="content">小米头戴式耳机 小米活塞耳机</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="title">保护套与贴膜</span><br><span class="content">保护套/保护壳 贴膜 防尘塞</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="title">后盖与个性化配件</span><br><span class="content">米键 后盖 贴纸 手机支架</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="last">
                                <span class="title">小米生活方式</span><br><span class="content">服装 米兔 背包 生活周边</span>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="container-nav-right">
                <a href="#">首页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小米手机&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;红米&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小米平板&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小米电视&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;盒子&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;路由器&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合约器&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服务&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;社区</a>
                <div class="container-nav-right-one">
                    <div class="container-nav-right-one-content">
                            <img src="images/banner1.png" alt="">
                            <img src="images/banner2.png" alt="">
                            <img src="images/banner3.png" alt="">
                            <img src="images/banner4.png" alt="">
                            <img src="images/banner5.png" alt="">
                        </div>
                        <div class="btns">
                            <button class="current">1</button>
                            <button>2</button>
                            <button>3</button>
                            <button>4</button>
                            <button>5</button>
                        </div>
                </div>
                <div class="container-nav-right-two">
                    <table class="two">
                        <tr>
                            <td><img src="images/01.png" alt=""></td>
                            <td><img src="images/02.png" alt=""></td>
                            <td><img src="images/03.png" alt=""></td>
                        </tr>
                    </table>
                </div>
                </div>
            </div>
        </div>
        <div class="container-wrap-two">
            <div class="container-wrap-two-title">
                <div class="container-wrap-two-title-left">
                    <a href="#">小米明星单品&nbsp;&nbsp;&nbsp;</a><span>根据机型选单品</span>
                </div>
                <div class="container-wrap-two-title-right">
                    <button class="b-one"></button>
                    <button class="b-two"></button>
                </div>
            </div>
            <div class="container-wrap-two-img">
                <div class="row border">
                <div class="col-3 r-border">
                    <img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg">
                    <p>小米智能插座</p>
                    <span>让普通家电变得智能</span>
                </div>
                <div class="col-3 r-border">
                    <img src="images/T1XYxTBsAT1RXrhCrK!220x220.jpg">
                    <p>小米空气净化器</p>
                    <span>高性能智能空气净化器立即预约</span>
                </div>
                <div class="col-3 r-border">
                    <img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg">
                    <p>小米活塞耳机简约版</p>
                    <span>好声音源自活塞音腔，延续经典设计</span>
                </div>
                <div class="col-3">
                    <img src="images/aa.jpg">
                    <p>小米路由器</p>
                    <span>顶级双屏幕AC智能路由器，内置1TB大硬盘</span>
                </div>
                </div>
            </div>
        </div>
        <div class="container-wrap-three">
            <div class="container-wrap-three-title">
                <span class="one">新品上架</span>
                <span class="two">更多<img src="images/06.png"></span>
            </div>
            <div class="container-wrap-three-img">
                <div class="col-9 height border">
                <div class="col-8 height-small border">
                    <img src="images/fanghezi0407xiao.jpg">
                </div>
                <div class="col-4 height-small border bd-one" >
                    <span>小米手环</span>
                    <span>79元</span>
                    <img src="imageS/T1qaVvB7CT1RXrhCrK!220x220.jpg">
                </div>
                <div class="col-4 height-small border bd-two" >
                    <div class="col-12 height-half border">
                        <span>五周年米兔钥匙扣</span>
                        <span>9.9元</span>
                        <img src="images/T1TfAgB4KT1RXrhCrK!220x220.jpg">
                    </div>
                    <div class="col-12 height-half ">
                        <span>QCY派Q8蓝牙耳机</span>
                        <span>59.9元</span>
                        <img src="images/T1SrKTBmWT1RXrhCrK!220x220.jpg">
                    </div>
                </div>
                <div class="col-4 height-small border bd-three" >
                    <span>小米T恤路标MILOGO</span>
                    <span>39元</span>
                    <img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg">
                </div>
                <div class="col-4 height-small border bd-four" >
                    <span>小米4实木后盖</span>
                    <span>69元</span>
                    <img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg">
                </div>
                <div class="col-4 height-small border bd-five" >
                    <span>小米Note超薄保护壳</span>
                    <span>49元</span>
                    <img src="images/baohuke.png">
                </div>
                <div class="col-4 height-small border bd-six" >
                    <span>小米自拍杆</span>
                    <span>49元</span>
                    <img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg">
                </div>
                <div class="col-4 height-small" >
                    <span>先锋CL31系列耳式耳机</span>
                    <span>99元</span>
                    <img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg">
                </div>
                </div>
                <div class="col-3 height border">
                    <div class="col-12 height-smallone">
                        <span class="tj">特价商品</span>
                        <p>SanDisk32GB存储卡</p>
                        <span><a class="yuanjia">79元</a><a class="xianjia">109元</a></span>
                        <span>还有更多特价商品</span>
                        <img src="images/T1ByZTBjJT1RXrhCrK.jpg">
                    </div>
                    <div class="col-12 height-smallone border bd-eight">
                        <p>特惠配件套餐</p>
                        <span>手机必备配件组合购买</span>
                        <span>实惠更优惠</span>
                        <img src="images/channel-list-cool.jpg">
                    </div>
                    <div class="col-12 height-smallone border bd-nine">
                        <p>我爱酷玩</p>
                        <span>邂逅炫酷的电子产品</span>
                        <span>结合趣味相投的朋友</span>
                        <img src="images/channel-list-new.jpg">
                    </div>
                    <div class="col-12 height-smalltwo  font">
                        <a href="#">企业用户采购通道&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</a>
                        <hr>
                        <a href="#">小米手机防伪查询&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</a>
                        <hr>
                        <a href="#">小米手机官翻版&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</a>
                        <hr>
                        <a href="#">小米路由器官翻版&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</a>
                        <hr>
                        <a href="#">米粉红包&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</a>
                        <hr>
                    </div>
                    <div class="last">
                    <p>话费充值</p>
                    <input type="text" placeholder="请输入手机号">
                    <select class="s-one" type="text" name="huafei" id="">
                        <option value="">100元</option>
                        <option value="">200元</option>
                        <option value="">300元</option>
                        <option value="">400元</option>
                        <option value="">500元</option>
                    </select>
                    <br>
                    <span>实付价格98.4元起</span>
                    <button>立即充值</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="bottom-wrap">
            <div class="foot-one">
                <div class="foot-t-one">
                    <img src="images/10.png">
                    <h5>一小时快修服务</h5>
                </div>
                <div class="foot-t-two">
                    <img src="images/11.png">
                    <h5>七天无理由退货</h5>
                </div>
                <div class="foot-t-three">
                    <img src="images/12.png">
                    <h5>15天免费换货</h5>
                </div>
                <div class="foot-t-four">
                    <img src="images/13.png">
                    <h5>满150元包邮</h5>
                </div>
                <div class="foot-t-five">
                    <img src="images/14.png">
                    <h5>520余家售后网点</h5>
                </div>
            </div>
            <div class="foot-two">
                <div class="foot-text-one">
                    <h4>帮助中心</h4>
                    <h3>购物指南</h3>
                    <h3>支付方式</h3>
                    <h3>配送方式</h3>
                </div>
                <div class="foot-text-two">
                    <h4>服务支持</h4>
                    <h3>售后政策</h3>
                    <h3>自助服务</h3>
                    <h3>相关下载</h3>
                </div>
                <div class="foot-text-three">
                    <h4>小米之家</h4>
                    <h3>小米之家</h3>
                    <h3>服务网店</h3>
                    <h3>预约亲临到店服务</h3>
                </div>
                <div class="foot-text-four">
                    <h4>关于小米</h4>
                    <h3>了解小米</h3>
                    <h3>加入小米</h3>
                    <h3>联系我们</h3>
                </div>
                <div class="foot-text-five">
                    <h4>关注我们</h4>
                    <h3>新浪微博</h3>
                    <h3>小米部落</h3>
                    <h3>官方微信</h3>
                </div>
                <div class="foot-text-six">
                    <h4 class="tel">400-100-5678</h4>
                    <h3>周一至周日8 : 00-18 ：00 </h3>
                    <h3>(仅收市话费)</h3>
                    <button>24小时在线客服</button>
                </div>
            </div>
            <div class="foot-three">
                <span class="wangzhan">小米旗下网站：小米网&nbsp;&nbsp;|&nbsp;&nbsp;MIUI&nbsp;&nbsp;|&nbsp;&nbsp;米聊&nbsp;&nbsp;|&nbsp;&nbsp;多看书城&nbsp;&nbsp;|&nbsp;&nbsp;小米路由器&nbsp;&nbsp;|&nbsp;&nbsp;繁体香港&nbsp;&nbsp;|&nbsp;&nbsp;繁体台湾&nbsp;&nbsp;|&nbsp;&nbsp;English&nbsp;&nbsp;|&nbsp;&nbsp;小米后院&nbsp;&nbsp;|&nbsp;&nbsp;小米天猫店&nbsp;&nbsp;|&nbsp;&nbsp;小米直营店&nbsp;&nbsp;|&nbsp;&nbsp;小米网盟</span><br>
                <span>@mi.com 京ICP证110507号 京ICP证1004644号 京公网安备1101080212535号 京网文[2014]0059-0009号</span>
            </div>
            <div class="foot-four">
                <img src="images/16.png" alt="">
                <select class="s-two">
                    <option value="">简体中文</option>
                    <option value="">English</option>
                </select>
            </div>
        </div>
    </div>
    <script>
            $(function(){
                $(".btns button").click(function(){
                    $(this).addClass("current").siblings().removeClass("current");
                    var imgs = $(".container-nav-right-one img");
                    var index = $(this).index();
                    imgs.eq(index).show(10).siblings().hide(10)
                })
            })
        </script>
        <a href="../../index.html">
            <button id="back" type="button">返回</button>
        </a>
        <div class="next">
                <a href="../木兮地板/index.html">下一页</a>
        </div>
</body>
</html>
